<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>slider-page</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
</head>

<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title">滑动页面</h1>
        </div>
        <ul class="tabbar tabbar-line animated" data-col="5" id="ID-Tabbar">
            <li class="tab active">
                <label class="tab-label">头条</label>
            </li>
            <li class="tab">
                <label class="tab-label">推荐</label>
            </li>
            <li class="tab">
                <label class="tab-label">科技</label>
            </li>
            <li class="tab">
                <label class="tab-label">舆情</label>
            </li>
            <li class="tab">
                <label class="tab-label">动态</label>
            </li>
        </ul>
    </header>
    <article style="padding-top:84px">
        <div class="slider-container" id="ID-Pages" style="height: 300px;">
        <div class="slider-wrapper">
        <div class="slider-slide">
            <!--第一页:start-->
            <!--第一页:end-->
        </div>
        <div class="slider-slide">
            <!--第二页:start-->
            <!--第二页:end-->
        </div>
        <div class="slider-slide">
            <!--第三页:start-->
            <!--第三页:end-->
        </div>
        <div class="slider-slide">
            <!--第四页:start-->
            <!--第四页:end-->
        </div>
        <div class="slider-slide">
            <!--第五页:start-->
            <!--第五页:end-->
        </div>
        </div>
        </div>
    </article>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script type="text/javascript">

        /*兼容Ios浏览器滚动到最底或者最顶，不能滑动的问题*/
        /*[].slice.call(slides).forEach(function(n,i,a){
            n.addEventListener("scroll",function(e){
                compatibleIosScroll(e);
            },false);
        })
        function compatibleIosScroll(e){
            var container=e.target;
            var clientHeight=container.clientHeight; 
            var scrollTop=container.scrollTop; 
            var scrollHeight=container.scrollHeight;
            if(scrollTop==0){
                container.scrollTop=1;
                return;
            }
            if (clientHeight+scrollTop>=scrollHeight){
                container.scrollTop=container.scrollTop-1;
            }
        }*/
        var view={
            /*=========================
              Model
              ===========================*/
            initialize:function(){
                this.render();//使用backbone时，此行无用
            },
            render:function(){
                var self = this;
                //渲染页面
                this.slides=document.querySelectorAll("#ID-Pages > .slider-wrapper > .slider-slide");
                this.sliderContainer=document.getElementById("ID-Pages");
                this.sliderContainer.style.height=(window.innerHeight-84)+"px";

                this.tabbarContainer=document.getElementById("ID-Tabbar");
                this.tabs=this.tabbarContainer.querySelectorAll(".tab");

                this.slider=new Slider("#ID-Pages",{
                    onSlideChangeEnd:function(e){
                        self._tabActive(e.activeIndex);
                    }
                });

                //加载数据
                this.loadData();
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            loadData:function(){
                var self=this;
                var pageDataCount=[100,10,30,40,50];//每页数据条数
                [].slice.call(self.slides).forEach(function(n,i,a){
                    var datastr="";
                    for(var j=0;j<pageDataCount[i];j++){
                        datastr+='<li class="list-li underline" style="padding:12px 10px;"><p>第'+i+'页</p></li>'
                    }
                    n.innerHTML='<ul class="list">'+datastr+'</ul>';
                })

                this._attach();//使用backbone时，此行无用
            },
            /*=========================
              Method
              ===========================*/
            _eachBreak:function(arr,fn){
                for(var i=0;i<arr.length;i++){
                    if(fn(arr[i],i)==false)break;
                }
            },
            _tabActive:function(index){
                for(var i=0,t;t=this.tabs[i++];){
                    t.classList.remove("active");
                }
                this.tabs[index].classList.add("active");
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                for(var i=0,t;t=this.tabs[i++];){
                    t.addEventListener("click",function(e){
                        self._onClickTab(e);
                    },false);
                }
            },
            /*=========================
              Event Handler
              ===========================*/
            _onClickTab:function(e){
                var index=0;
                this._eachBreak(this.tabs,function(n,i){
                    if(n==e.target){
                        index=i;
                        return false;
                    }
                });
                this._tabActive(index);
                this.slider.slideTo(index);
            }
        }

        window.addEventListener("load",function(){
            view.initialize();
        }, false);
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>
